<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机生成颜色</title>
    <style>
       #background{
           width: 400px;
           height: 400px;
           margin: auto;
           background-color: antiquewhite;
       }
    </style>
</head>
<body>
    <div id="background"></div>
    <script>
        function randomColor(){
            const color = ['a','b','c','d','e','f','A','B','C','D','E','0','1','2','3','4','5','6','7','8','9']
            // 三位和六位，都是有用的二进制颜色  设置type为奇数就是3，偶数就是6位
            const type = ~~(Math.random() * 10 + 1)
            // 循环的长度
            let len = type % 2 == 0 ? 3 : 6 
            // 存放结果
            let ans = ''
            for(let i = 0; i < len;i++) {
                //这里循环随机得到数组下标
                let index = ~~(Math.random() * color.length)
                ans += color[index]
            }
            return '#' + ans
        }
        let background = document.getElementById('background')
        setInterval(() => {
            background.style.backgroundColor = randomColor()
        },3000)
    </script>
</body>
</html>